<template>
  <a-button
    :type="type"
    :size="size"
    :disabled="disabled"
    :loading="loading"
    :icon="icon"
    :class="textButton"
    :shape="shape"
    :ghost="ghost"
    :block="block"
    @click="handleClick"
  >
    <slot />
  </a-button>
</template>

<script>
export default {
  name: 'DButton',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'default'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String
    },
    text: {
      type: Boolean,
      default: false
    },
    shape: {
      type: String
    },
    ghost: {
      type: Boolean,
      default: false
    },
    block: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    textButton() {
      if (this.type === 'primary') {
        return { textPrimaryButton: this.text };
      }
      if (this.type === 'danger') {
        return { textDangerButton: this.text };
      }
      return { textButton: this.text };
    }
  },
  methods: {
    handleClick(e) {
      this.$emit('click', e);
    }
  }
};
</script>

<style lang="scss">
.tw-btn {
  border-color: #dddddd;
}
.tw-btn:hover {
  background-color: #ffffff;
  color: #2074e1;
  border-color: #2074e1;
}
.tw-btn:focus {
  background-color: #ffffff;
  color: #666666;
  border-color: #dddddd;
}
.tw-btn-primary:hover {
  background-color: #4b8ee5;
  color: #ffffff;
  border-color: #4b8ee5;
}
.tw-btn-primary:focus {
  background-color: #2074e1;
  color: #ffffff;
  border-color: #2074e1;
}
.tw-btn-primary[disabled] {
  background-color: #90baf0 !important;
  color: #ffffff !important;
  border-color: #90baf0 !important;
}
.tw-btn-danger:hover {
  background-color: #df6969;
  color: #ffffff;
  border-color: #df6969;
}
.tw-btn-danger:focus {
  background-color: #d74343;
  color: #ffffff;
  border-color: #d74343;
}
.tw-btn-danger[disabled] {
  background-color: #eba1a1 !important;
  color: #ffffff !important;
  border-color: #eba1a1 !important;
}
.textButton {
  color: #666666;
  background: transparent;
  border: transparent;
  box-shadow: none;
}
.textButton:hover {
  color: #2074e1;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}
.textButton[disabled] {
  color: #b3b3b3 !important;
  background: transparent !important;
  border: transparent !important;
  box-shadow: none !important;
}
.textPrimaryButton {
  color: #2074e1;
  background: transparent;
  border: transparent;
  box-shadow: none;
}
.textPrimaryButton:hover {
  color: #4b8ee5;
  background: transparent;
  border: transparent;
  box-shadow: none;
}
.textPrimaryButton[disabled] {
  color: #90baf0 !important;
  background: transparent !important;
  border: transparent !important;
  box-shadow: none !important;
}
.textDangerButton {
  color: #d74343;
  background: transparent;
  border: transparent;
  box-shadow: none;
}
.textDangerButton:hover {
  color: #df6969;
  background: transparent;
  border: transparent;
  box-shadow: none;
}
.textDangerButton[disabled] {
  color: #eba1a1 !important;
  background: transparent !important;
  border: transparent !important;
  box-shadow: none !important;
}
</style>
